<template>
  <div class="index">

    <div>
      <!-- Index组件的子路由插座(二级路由) -->
      <keep-alive :include="['Home', 'Menu', 'My']">
        <router-view></router-view>
      </keep-alive>
    </div>


    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" active-color="#0C34BA" inactive-color="#646566" route>

      <van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :to="{name: item.routeName}">
        <span>{{item.title}}</span>
          <template #icon="props">
            <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
          </template>
      </van-tabbar-item>

    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: 'Index',

    data() {
      return {
        active: 0,

        //底部导航数据
        tabbarData: [
          {
            title: '首页',
            activeIcon: require('../assets/home_active.png'),
            inactiveIcon: require('../assets/home.png'),

            //路由名称
            routeName: 'Home'
          },
          {
            title: '菜单',
            activeIcon: require('../assets/menu_active.png'),
            inactiveIcon: require('../assets/menu.png'),
            routeName: 'Menu'
          },
          {
            title: '购物袋',
            activeIcon: require('../assets/shopbag_active.png'),
            inactiveIcon: require('../assets/shopbag.png'),
            routeName: 'Shopbag'
          },
          {
            title: '我的',
            activeIcon: require('../assets/my_active.png'),
            inactiveIcon: require('../assets/my.png'),
            routeName: 'My'
          }
        ]
      }
    }

  }
</script>

<style lang="less" scoped>
  .box{
    width: 100px;
    height: 100px;
    background-color: #aaa;
  }
</style>